{% extends "base.html" %}
{% block title %}Выбор Тарифа{% endblock %}

{% block content %}
<!--script>
    window.onload = function (){
        var select = document.getElementById('tariffs_sbox');

        var delTariffButton = document.getElementById('delete_tariff');
        function remove(){
            value = select.selectedIndex;
            select.removeChild(select[value]);
        }
        delTariffButton.onclick = remove;

        //var select2 = document.getElementById('selectBox2');
        var addTariffButton = document.getElementById('add_tariff');
        function add(){
            //value1 = select2.selectedIndex;
            //select.appendChild(select2[value1]);
            var my_value = 'testtest';
            var newOption = document.createElement('option'); 
            newOption.value = my_value;
            newOption.appendChild(document.createTextNode('my_ text'));
            // if you want to insert in the end
            select.appendChild(newOption);
        }
        addTariffButton.onclick = add;
    }
</script-->

<h1 align="center">Введите названия тарифов и критерии</h1>

<table border="0" cellspacing="0" align="center" width="700">
     <tr>
          <th colspan="2" width="300" align="center">Тарифы</th>
          <th colspan="2" width="300" align="center">Критерии</th>
     </tr>
     <tr>
        <td>
            <select size={{ tariffs_len + 1 }} name="tariffs">
                {% for item in tariffs %}
                <option value="{{ item }}">{{ tariffs[item] }}</option>
                {% endfor %}
            </select>
        </td>
        <td> 
            <form method="post" action="add_tariff">
                <input type="text" name="tariff_name" value="{{ tariff_name }}">
                {{ tariff_error }}
                <input type="submit" value="Добавить">
            </form>
            <form method="post" action="del_tariff">
                <input type="submit" value="Удалить">
            </form>
          </td>
          <td>
               <select size={{ criterions_len + 1 }} name="criterions">
                 {% for item in criterions %}
                <option value="{{ item }}">{{ criterions[item] }}</option>
                {% endfor %}
               </select>
          </td>
          <td> 
              <form method="post" action="add_criterion">
                <input type="text" name="criterion_name" value="{{ criterion_name }}">
                {{ criterion_error }}
                <input type="submit" value="Добавить">
            </form>
            <form method="post" action="del_criterion">
                <input type="submit" value="Удалить">
            </form>
          </td>
     </tr>
     <tr>
        <td colspan="4" align="center" style="padding-top: 20px">
            Следующий шаг: куча ответов на кучу вопросов.<br><br>
            <form method="post" action="/choise/">
                <input type="submit" value="Продолжить &raquo;">
            </form>
        </td>
    </tr>
</table>
{% endblock %}

{% block after_footer %}
<pre style="margin-left:150px"><code>TODO:
 - добавить обработчик событий для кнопки Удалить
 - привести внешний вид табличек в порядок</code></pre>
{% endblock after_footer %}